<template>
	<!-- 下拉菜单 -->
	<view class="dropdown">
		<div class="dr-top">
			<slot></slot>
		</div>
		<view v-if="show" @click="$emit('close')" class="mask">
			<view v-if="!custom" class="dr-box">
				<view class="dr-line"></view>
				<view class="dr-inner">
					<view class="dr-option" :class="{active:value==i}" v-for="(v,i) in data" :key="i" @click.stop="$emit('handle',v,i)">
						{{v}}
					</view>
				</view>
			</view>
			<view v-else>
				<slot name="bottom"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "dropdown",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			data: {
				type: Array,
				default: () => []
			},
			custom: {
				type: Boolean,
				default: false
			},
			value:{
				type: Number | String,
				default: 0
			}
		},
		data() {
			return {}
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.dropdown {
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.dr-top {
			flex: none;
		}

		.mask {
			flex: 1;
			width: 100vw;
			height: calc(100vh - 80rpx);
			position: absolute;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.7);

			.dr-box {
				background: #fff;

				.dr-line {
					width: 750rpx;
					height: 10rpx;
					background: #F5F5F5;
				}

				.dr-inner {
					padding-bottom: 12rpx;

					.dr-option {
						padding: 28rpx 30rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #666666;
						line-height: 28rpx;
						&.active{
							color: $c-bgColor;
						}
					}
				}

			}
		}

	}
</style>